<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>4</p>
    <p>5</p>
    <p>22</p>
</body>
</html>
<script>
    //浅谈Array.from  
    //Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
    //所谓类数组对象，最基本的要求就是具有length属性的对象。
    let arrayLike = {   //将类数组对象转换为真正数组：
        0: 'tom', 
        1: '65', 
        2: '男',        //该类数组对象的 属性名必须为数值型或字符串型的数字
        3: ['jane','john','Mary'],
        'length': 4     //该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
    }
    let arr = Array.from(arrayLike)
    console.log(arr)     //['tom','65','男',['jane','john','Mary']]


    //实际应用中，常见的类似数组的对象是
        //1 DOM 操作返回的 NodeList 集合
        //2 函数内部的arguments对象。Array.from()方法都可以将它们转为真正的数组。
        // NodeList对象
        let ps = document.querySelectorAll('p');
            //querySelectorAll方法返回的是一个类似数组的对象，可以将这个对象转为真正的数组，再使用forEach方法。
            Array.from(ps).forEach(function (p) {
            console.log(ps); //0: p... length: 5
            console.log(p)   //拿到元素
        });
        // arguments对象
        function foo() {
            var args = Array.from(arguments);
        // ...
        }


    //扩展运算符（...）也可以将某些数据结构转为数组。
        // arguments对象
        function foo() {
            const args = [...arguments];
        }
        // NodeList对象
        [...document.querySelectorAll('div')]
</script>